<template>
  <div class="trainingRoom">
    <el-container class="container">
      <el-aside width="200px">
        <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>练习室</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <RouterLink to="/trainingroom/training">我的练习室</RouterLink>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item index="2">
            <el-icon>
              <setting/>
            </el-icon>
            <RouterLink to="/trainingroom/mediaCach">缓存</RouterLink>
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon>
              <setting/>
            </el-icon>
            <span>音乐库</span>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon>
              <setting/>
            </el-icon>
            <RouterLink to="/trainingroom/collections">收藏</RouterLink>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon>
              <setting/>
            </el-icon>
            <RouterLink to="/trainingroom/history">历史</RouterLink>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
          >
            <el-menu-item index="1">资源</el-menu-item>
            <el-menu-item index="2">视频课</el-menu-item>
            <el-menu-item index="3">直播课</el-menu-item>
          </el-menu>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang='ts'>
import {computed, reactive, ref} from 'vue'
import {useRoute} from "vue-router";

const route = useRoute()
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleOpen = () => {
  console.log(222)
}
const handleClose = () => {
  console.log(333)
}
const activeMenu = computed(() => {
  console.log(333, route)
})
</script>

<style scoped lang="less">
@import "training.less";
</style>
